<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>生物特征识别中心</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-CN"/>
    <link rel="stylesheet" href="__CSS__/bootstrap.css">
    <link rel="stylesheet" href="__CSS__/my.css">
</head>
<body>
{$nav}
<div class="container" id="container">
    <!-- ===============标题=================== -->
    <div>
        <div class="row">
            <div class="col-md-10 col-xs-9">
                <!-- <span class="heading"> 统计 </span> -->
            </div>
        </div>
    </div>
    <div>
        <div class="col-md-8">
            <h3>按时间</h3>
        <canvas id="chart-by-year"></canvas>
        </div>
        <div class="col-md-1"></div>
        <div class="col-md-3">
        <div class="panel panel-default" style="margin-top:70px">
            <div class="panel-heading">
                <h4 class="panel-title">
                    数据选项
                </h4>
            </div>
            <div class="panel-body">
                <form role="from" action="#" id="chart-form" onsubmit="$.displayChart(); return false;">
                    <!--<input type="hidden" id="date_from" name="date_from">-->
                    <!--<input type="hidden" id="date_to" name="date_to">-->
                    <div class="form-group">
                        <label for="chart-year">年份：</label>
                        <input type="text" class="form-control" id="chart-year" name="year">
                    </div>
                    <div class="form-group">
                        <label for="chart-unit">送样单位：</label>
                        <select class="form-control unit-select" name="id_unit" id="chart-unit">
                            <option value="">全部</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="chart-type">送样单位：</label>
                        <select class="form-control type-select" name="id_type" id="chart-type">
                            <option value="">全部</option>
                        </select>
                    </div>
                </form>
                <div hidden="true" class="alert alert-warning" id="chart-warning"></div>
                <div align="right">
                    <button class="btn btn-primary" id="chart-submit"><span class="glyphicon glyphicon-ok"></span>&nbsp;提交
                    </button>
                </div>

            </div>
        </div>
        </div>
        <div>
            <div class="col-md-6">
            <h3 style="margin-top: 30px">按送样单位</h3>
        <canvas id="chart-by-unit"></canvas>
        </div>
        <div class="col-md-6">
            <h3 style="margin-top: 30px">按样品类型</h3>
        <canvas id="chart-by-type"></canvas>
        </div>
        </div>

    
    


</div>

</div>
</body>
<script src="__JS__/jquery-3.2.1.min.js"></script>
<script src="__JS__/jquery.cookie.js"></script>
<script src="__JS__/bootstrap.min.js"></script>
<script src="__JS__/Chart.js"></script>
<script src="__JS__/my.js"></script>
<script type="text/javascript">

    var dateNow = new Date();
    var yearNow = dateNow.getFullYear();
    $("#chart-year").val(yearNow);

    /*========================显示现有样品类型===========================*/
    var data_type;
    $.post('/sample_rsv/SampleType/getAll', null, function (data) {
        data_type = data;
        for (var index_type in data) {
            $(".type-select").append("<option value='" + data[index_type].id + "'>" + data[index_type].name + "</option>");
        }
    });

    /*========================显示现有送样单位===========================*/
    var data_unit;
    $.post('/sample_rsv/Unit/getAll', null, function (data) {
        data_unit = data;
        for (var index_unit in data_unit) {
            $(".unit-select").append("<option value='" + data_unit[index_unit].id + "'>" + data_unit[index_unit].name + "</option>");
        }
    });

    $.addChartData = function (obj, data, label, color) {
        obj.labels.push(label);
        obj.datasets[0].backgroundColor.push(color);
        obj.datasets[0].borderColor.push(color);
        obj.datasets[0].data.push(data);
    };

    $.emptyData = function (chartDataYear) {
        chartDataYear.labels.splice(0, chartDataYear.labels.length);
        chartDataYear.datasets[0].backgroundColor.splice(0, chartDataYear.datasets[0].backgroundColor.length);
        chartDataYear.datasets[0].borderColor.splice(0, chartDataYear.datasets[0].borderColor.length);
        chartDataYear.datasets[0].data.splice(0, chartDataYear.datasets[0].data.length);
    };

    var options = {
        responsive: true,
        scales: {
            //设置纵坐标从0开始
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    };

    //时间图
    var chartDataYear = {
        labels: [],
        datasets: [{
            label: '样品数量',
            backgroundColor: [],
            borderColor: [],
            borderWidth: 1,
            data: []
        }]
    };
    var contextYear = $("#chart-by-year").get(0).getContext('2d');
    var chartYear = new Chart(contextYear, {
        type: 'bar',
        data: chartDataYear,
        options: options
    });

    //单位图
    var chartDataUnit = {
        labels: [],
        datasets: [{
            label: '样品数量',
            backgroundColor: [],
            borderColor: [],
            borderWidth: 1,
            data: []
        }]
    };
    var contextUnit = $("#chart-by-unit").get(0).getContext('2d');
    var chartUnit = new Chart(contextUnit, {
        type: 'bar',
        data: chartDataUnit,
        options: options
    });

    //样品类型图
    var chartDataType = {
        labels: [],
        datasets: [{
            // label: '样品数量',
            backgroundColor: [],
            borderColor: [],
            borderWidth: 1,
            data: []
        }]
    };
    var optionsPie={
        responsive: true,
    };
    var contextType = $("#chart-by-type").get(0).getContext('2d');
    var chartType = new Chart(contextType, {
        type: 'doughnut',
        data: chartDataType,
        options: optionsPie
    });

    $("#chart-submit").click(function () {
        $.displayChart();
    });

    $.displayChart = function () {
        $.emptyData(chartDataYear);
        $.emptyData(chartDataUnit);
        $.emptyData(chartDataType);
        var year = $('#chart-year').val();
        var preg = /^20[0-9]{2}$/;
        if (preg.test(year)) {

            var chartForm=$("#chart-form");

            //时间图
            var color_year = $.myRGBA('blue', 1);
            $.post('/sample_rsv/Statistics/getByYear',chartForm.serialize(),function (data) {
                for(var index_data in data){
                    $.addChartData(chartDataYear, data[index_data].count,  data[index_data].month, color_year);
                }
                chartYear.update();
            });


            //单位图
            var color_unit = $.myRGBA('orange', 1);
            $.post('/sample_rsv/Statistics/getByUnit',chartForm.serialize(),function (data) {
                for(var index_data in data){
                    $.addChartData(chartDataUnit, data[index_data].count,  data[index_data].name, color_unit);
                }
                chartUnit.update();
            });


            //样品类型图
            var arr_color=['red','orange','green','blue','purple','yellow'];
            $.post('/sample_rsv/Statistics/getByType',chartForm.serialize(),function (data) {
                for(var index_data in data){
                     var index_color=index_data % arr_color.length;
                    $.addChartData(chartDataType, data[index_data].count,  data[index_data].name, $.myRGBA(arr_color[index_color], 1));
                }
                chartType.update();
            });


        } else {
            $("#chart-warning").append('年份格式错误');
        }
    };

    $(document).ready(function () {
        $.displayChart();
    });

</script>
</html>
